let dom = require("../../utils/dom.js");
let https = require("../../utils/https.js");
require("../../assets/css/index.less");

// 2.引入当前样式表
require("../../assets/fonts/iconfont.css");
require("./datelis.less");

dom.ready(function () {
  let id = location.search.slice(4);
  https.get("/api/train/courseDetail?id=" + id, (res) => {
    console.log(res.data);
    if (res.errno == 0) {
      let main = dom.$("main");
      main.innerHTML = `
    <div class="vdieo-div rel">
    <span class="iconfont icon-leftarrow abs" id="return-back"></span>
    <img src="${https.BASE_URL + res.data.imgurl}">
    <div class="clickplay abs">
      <span class="iconfont icon-play fontWhite" id="play"></span>
      <p class="vio-word f14 fontWhite">视频预览</p>
    </div>
  </div>
  <section class="vio-content">
    <div class="vio-name">
      <h1 class="f24">${res.data.name}</h1>
      <div class="disflex jcsb">
        <p><span class="kilo">${res.data.calorie}</span>千卡</p>
        <p><span class="min">${res.data.time}</span>分钟</p>
        <p><span class="peo">${
          res.data.peoplenum
        }</span>人练过<span class="iconfont icon-rightarrow "></span>
        </div></p>
       
    </div>

    <section class="user-massage">
      <div class="icon-user disflex">
        <img src="#" alt="" />
        <div class="disflex">
          <p class="f18">用户名</p>
          <p class="f14">三线达人课程设计师</p>
        </div>
      </div>
      <p class="sport-cont f16">
       ${res.data.desc}
        <span>更多</span>
      </p>
      <div class="training disflex">
        <div>
          <p><span class="iconfont icon-frequency"></span>练习频次</p>
          <p>每周${res.data.frequency}次</p>
        </div>
        <div>
          <p><span class="iconfont icon-instrument"></span>器械</p>
          <p>${res.data.instrument}</p>
        </div>
      </div>
    </section>
    <div class="start" id="${res.data.courseId}">开始训练</div>
  </section>
    
    `;
      dom.addEvent(".start", function () {
        window.scrollTo(top);
        dom.$(".shade").classList.add("isBlock");
      });
      dom.addEvent("#return-back", function () {
        location.href = "circle.html";
      });
      dom.$("#video-change").src =
        https.BASE_URL + res.data.fragments[res.data.courseId-1].videoUrl;
      dom.$(".training-name").innerHTML =
        res.data.fragments[res.data.courseId-1].title;
    }
  });

  dom.addEvent("#return-nowPage", function () {
    console.log("asdasdasdasdasdas");
    dom.$(".shade").classList.remove("isBlock");
    dom.$(".shade").classList.add("isNone");
  });

  let flag = true;
  dom.addEvent("#chenbtn", function () {
    if (flag) {
      dom.$("#chenbtn").classList.add("icon-stop");
      dom.$("#chenbtn").classList.remove("icon-play");

      dom.$("#video-change").play();
      flag = false;
    } else {
      dom.$("#chenbtn").classList.add("icon-play");
      dom.$("#chenbtn").classList.remove("icon-stop");
      dom.$("#video-change").pause();
      flag = true;
    }
  });
});
